<!-- MapControls.vue -->
<template>
  <div class="controls-panel">
    <div class="controls-header">
      <h3>地图控制器</h3>
    </div>

    <div class="controls-content">
      <!-- 工具栏控制 -->
      <div class="control-group">
        <label>地图工具栏：</label>
        <button
          @click="toggleControl('toolbar')"
          :class="{ active: controls.toolbar }"
          class="control-btn"
        >
          {{ controls.toolbar ? '隐藏' : '显示' }}工具条
        </button>
      </div>

      <!-- 比例尺控制 -->
      <div class="control-group">
        <label>比例尺：</label>
        <button
          @click="toggleControl('scale')"
          :class="{ active: controls.scale }"
          class="control-btn"
        >
          {{ controls.scale ? '隐藏' : '显示' }}比例尺
        </button>
      </div>

      <!-- 鹰眼控制 -->
      <div class="control-group">
        <label>鹰眼视图：</label>
        <button
          @click="toggleControl('overview')"
          :class="{ active: controls.overview }"
          class="control-btn"
        >
          {{ controls.overview ? '隐藏' : '显示' }}鹰眼
        </button>
      </div>

      <!-- 地图类型控制 -->
      <div class="control-group">
        <label>地图类型：</label>
        <button
          @click="toggleControl('mapType')"
          :class="{ active: controls.mapType }"
          class="control-btn"
        >
          {{ controls.mapType ? '隐藏' : '显示' }}类型切换
        </button>
      </div>

      <!-- 缩放控制 -->
      <div class="control-group">
        <label>缩放控制：</label>
        <div class="zoom-controls">
          <button @click="zoomIn" class="zoom-btn">放大</button>
          <button @click="zoomOut" class="zoom-btn">缩小</button>
          <span class="zoom-level">级别: {{ currentZoom }}</span>
        </div>
      </div>

      <!-- 定位控制 -->
      <div class="control-group">
        <label>定位控制：</label>
        <button @click="getCurrentPosition" class="control-btn">
          定位到我的位置
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
  map: {
    type: Object,
  },
  AMap:{
    type: Object,
  }
})

// setInterval(()=>{
//   console.log(props.AMap,'AMap')
// },1000)
// 通过依赖注入获取地图实例
const currentZoom = ref(11);

// 控制器状态
const controls = ref({
  toolbar: false,
  scale: false,
  overview: false,
  mapType: false
});

// 控制器实例
const controlInstances = ref({
  toolbar: null,
  scale: null,
  overview: null,
  mapType: null
});

// 监听地图缩放变化
watch(() => props.map?.getZoom(), (zoom) => {
  if (zoom) currentZoom.value = zoom;
});

// 切换控制器显示/隐藏
const toggleControl = async (controlType) => {
  console.log(props.map,props.AMap,'map')
  if (!props.map) return;

  if (!props.AMap) return;

  controls.value[controlType] = !controls.value[controlType];
  if (!controlInstances.value[controlType]){
    // 添加控制器
    await addControl(controlType);
  }
  if (controls.value[controlType]) {
    controlInstances.value[controlType].show();
  } else {
    controlInstances.value[controlType].hide();
  }
};

// 添加控制器
const addControl = (controlType) => {
  return new Promise((resolve) => {
    props.map.plugin([`AMap.${getControlClassName(controlType)}`], () => {
      const AMap = props.AMap;

      switch (controlType) {
        case 'toolbar':
          controlInstances.value.toolbar = new props.AMap.ToolBar({
            position: 'LT', // 左上角
            offset: [10, 10]
          });
          props.map.addControl(controlInstances.value.toolbar);
          break;

        case 'scale':
          controlInstances.value.scale = new props.AMap.Scale({
            position: 'LB' // 左下角
          });
          props.map.addControl(controlInstances.value.scale);
          break;

        case 'overview':
          console.log(props.AMap,props.AMap.HawkEye)

          controlInstances.value.overview = new props.AMap.HawkEye({
            visible: true
          });

          props.map.addControl(controlInstances.value.overview);
          console.log('添加鹰眼')
          break;

        case 'mapType':
          controlInstances.value.mapType = new props.AMap.MapType({
            defaultType: 0, // 0-标准，1-卫星
            position: 'RT' // 右上角
          });
          props.map.addControl(controlInstances.value.mapType);
          break;
      }
      resolve();
    });
  });
};

// 移除控制器
const removeControl = (controlType) => {
  if (controlInstances.value[controlType]) {
    props.map.removeControl(controlInstances.value[controlType]);
    controlInstances.value[controlType] = null;
  }
};

// 获取控制器类名
const getControlClassName = (controlType) => {
  const classMap = {
    toolbar: 'ToolBar',
    scale: 'Scale',
    overview: 'HawkEye',
    mapType: 'MapType'
  };
  return classMap[controlType] || controlType;
};

// 地图缩放控制
const zoomIn = () => {
  const map = props.map;
  if (map) {
    const currentZoom = map.getZoom();
    map.setZoom(currentZoom + 1);
  }
};

const zoomOut = () => {
  const map = props.map;
  if (map) {
    const currentZoom = map.getZoom();
    map.setZoom(currentZoom - 1);
  }
};

// 定位到当前位置
const getCurrentPosition = () => {
  const map = props.map;
  return new Promise((resolve) => {
    map.plugin(['AMap.Geolocation'], () => {
      const AMap = props.AMap;
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        position: 'RB', // 右下角
        offset: [10, 20],
        showCircle: false
      });

      map.addControl(geolocation);

      geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete') {
          // 定位成功，将地图中心设置为当前位置
          map.setCenter([result.position.lng, result.position.lat]);
          resolve(result);
        } else {
          console.error('定位失败:', result);
          resolve(null);
        }

        // 移除定位控件
        map.removeControl(geolocation);
      });
    });
  });
};

// 组件卸载时清理所有控制器
onUnmounted(() => {
  Object.keys(controlInstances.value).forEach(controlType => {
    if (controlInstances.value[controlType]) {
      removeControl(controlType);
    }
  });
});

// 暴露方法给父组件
defineExpose({
  toggleControl,
  zoomIn,
  zoomOut,
  getCurrentPosition,
  controls: controlInstances
});
</script>

<style scoped>
.controls-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 250px;
}

.controls-header {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.controls-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.controls-content {
  padding: 15px;
}

.control-group {
  margin-bottom: 15px;
}

.control-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #666;
}

.control-btn {
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.control-btn:hover {
  background: #e8e8e8;
}

.control-btn.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.zoom-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.zoom-btn {
  padding: 6px 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.zoom-level {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
}
</style>